<!-- Copyright 2014 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<html>

<head>
<title class="i18n" msgid="options_page_title">ChromeVox Options</title>
<link rel="stylesheet" type="text/css" href="options.css">

<script type="text/javascript" src="../closure/base.js"></script>
<script type="text/javascript" src="../deps.js"></script>
<script type="text/javascript" src="options_loader.js"></script>
<script type="text/javascript" src="../chromeVoxChromeOptionsScript.js">
</script>
<script type="module"
    src="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js">
</script>
<script type="module"
    src="chrome://resources/cr_elements/cr_link_row/cr_link_row.js"></script>
</head>

<body>
  <!--
    The "with dev msgs" in the title helps when debugging problems
    with the message replacer.
  -->
  <h1 class="i18n" msgid="options_page_title">ChromeVox (with dev msgs)</h1>

  <div class="container">

  <p id="version"></p>

  <div class="option">
    <label id="verboseDescriptionsLabel" class="i18n"
          msgid="options_verbosity_verbose">
      Enable verbose descriptions.
    </label>
      <input id="useVerboseMode" type="checkbox" class="checkbox pref"
             name="useVerboseMode" aria-labelledby="verboseDescriptionsLabel">
  </div>

  <div class="option">
    <label id="readPageLabel" class="i18n" msgid="options_auto_read">
      Automatically read a page after it finishes loading.
    </label>
    <input id="autoRead" type="checkbox" class="checkbox pref"
             name="autoRead" aria-labelledby="readPageLabel">
  </div>

  <div class="option">
    <label id="speakMouseTextLabel" class="i18n" msgid="options_speak_mouse">
      Speak text under the mouse.
    </label>
    <input id="speakTextUnderMouse" type="checkbox" class="checkbox pref"
             name="speakTextUnderMouse" aria-labelledby="speakMouseTextLabel">
  </div>

  <div class="option" id="usePitchChangesOption">
    <label id="usePitchChangesLabel" class="i18n"
          msgid="options_use_pitch_changes_checkbox_label">
          Change pitch when speaking element types and formatted text
    </label>
    <input id="usePitchChanges" type="checkbox"
             class="checkbox pref" name="usePitchChanges"
             aria-labelledby="usePitchChangesLabel">
  </div>

  <div class="option" id="capitalStrategyOption">
    <label id="capitalStrategyLabel" class="i18n"
          msgid="options_capital_strategy_select_label">
      When reading capitals:
    </label>
    <select id="capitalStrategy" class="pref"
          aria-labelledby="capitalStrategyLabel">
      <option id="announceCapitals" class="i18n"
            msgid="options_announce_capitals">
        Speak "cap" before letter
      </option>
      <option id="increasePitch" class="i18n" msgid="options_increase_pitch">
        Increase pitch
      </option>
    </select>
  </div>

  <div class="option" id="numberReadingStyleOption">
    <label id="numberReadingStyleLabel" class="i18n"
          msgid="options_number_reading_style_select_label">
      Read numbers as:
    </label>
    <select id="numberReadingStyle" class="pref"
          aria-labelledby="numberReadingStyleLabel">
      <option id="asWords" class="i18n"
            msgid="options_number_reading_style_words">
        Words
      </option>
      <option id="asDigits" class="i18n"
              msgid="options_number_reading_style_digits">
        Digits
      </option>
    </select>
  </div>

  <div class="option" id="punctuationEchoOption">
    <label id="punctuationEchoLabel" class="i18n"
          msgid="options_punctuation_echo_select_label">
      Punctuation echo:
    </label>
    <select id="punctuationEcho" class="pref"
          aria-labelledby="punctuationEchoLabel">
      <option id="none" class="i18n"
            msgid="options_punctuation_echo_none">
        None
      </option>
      <option id="some" class="i18n"
              msgid="options_punctuation_echo_some">
        Some
      </option>
      <option id="all" class="i18n"
              msgid="options_punctuation_echo_all">
        All
      </option>
    </select>
  </div>

  <div class="option">
    <label id="announceDownloadsLabel" class="i18n"
          msgid="options_announce_download">
      Announce download notifications.
    </label>
    <input id="announceDownloadNotifications" type="checkbox"
             class="checkbox pref" name="announceDownloadNotifications"
             aria-labelledby="announceDownloadsLabel">
  </div>

  <div class="option">
    <label id="smartStickyModeLabel" class="i18n"
          msgid="options_smart_sticky_mode">
      Turn off sticky mode when editing text (Smart Sticky Mode)
    </label>
    <input id="smartStickyMode" type="checkbox"
             class="checkbox pref" name="smartStickyMode"
             aria-labelledby="smartStickyModeLabel">
  </div>

  <h2 class="i18n description" msgid="options_audio_description"
      id="audioDescription">
    When playing audio
  </h2>

  <div class="option">
    <select id="audioStrategy" class="pref" aria-labelledby="audioDescription">
      <option id="audioNormal" class="i18n" msgid="options_audio_normal">
        play at normal volume even if ChromeVox is speaking
      </option>
      <option id="audioDuck" class="i18n" msgid="options_audio_duck">
        play at lower volume when ChromeVox is speaking
      </option>
      <option id="audioSuspend" class="i18n" msgid="options_audio_suspend">
        pause playback when ChromeVox is speaking
      </option>
    </select>
  </div>

  <h2 class="i18n" msgid="options_voices">Voices</h2>
  <div class="option">
    <span class="i18n description" msgid="options_voices_description"
          id="voices_description">
      Select current voice:
    </span>
    <select id="voices" aria-labelledby="voices_description"></select>
  </div>

  <div class="option" id="languageSwitchingOption">
    <label id="voiceSwitchingLabel" class="i18n"
          msgid="options_lang_switching_checkbox_label">
      Automatically switch ChromeVox voice based on language
    </label>
    <input id="languageSwitching" type="checkbox"
             class="checkbox pref" name="languageSwitching"
             aria-labelledby="voiceSwitchingLabel">
  </div>

  <div class="option">
    <label>
      <cr-link-row id="openTtsSettings"
          using-slotted-label external embedded>
        <span slot="label" class="i18n" msgid="show_tts_settings"></span>
        <span slot="sub-label" class="i18n sub-description"
            msgid="options_show_tts_settings"></span>
      </cr-link-row>
    </label>
  </div>

  <div id="richTextIndicationOption">
    <h2 class="i18n" msgid="options_rich_text_header">Formatting</h2>
    <div class="option">
      <label id="textStylingLabel" class="i18n"
            msgid="options_rich_text_checkbox_label">
        Announce text styling
      </label>
      <input id="announceRichTextAttributes" type="checkbox"
             class="checkbox pref" name="announceRichTextAttributes"
             aria-labelledby="textStylingLabel">
    </div>
  </div>

  <h2 class="chromeos i18n" msgid="options_braille">Braille</h2>
  <div class="chromeos option">
    <span class="i18n description" msgid="options_braille_description_6"
          id="braille_description_6">
      Select a 6-dot braille table:
    </span>
    <select id="brailleTable6" aria-labelledby="braille_description_6"></select>
  </div>
  <div class="chromeos option">
    <span class="i18n description" msgid="options_braille_description_8"
          id="braille_description_8">
      Select an 8-dot braille table:
    </span>
    <select id="brailleTable8" aria-labelledby="braille_description_8"></select>
  </div>
  <div class="chromeos option">
    <button id="brailleTableType"></button><span>&nbsp;</span>
  </div>
  <div class="chromeos option">
    <label>
      <input id="brailleWordWrap" type="checkbox" class="checkbox pref"
             name="brailleWordWrap">
      <span class="i18n" msgid="options_braille_word_wrap">
        Enable word wrap
      </span>
    </label>
  </div>
  <div class="option">
    <label id="menuBrailleCommandsLabel" class="i18n"
          msgid="options_menu_braille_commands">
      Show braille commands in ChromeVox menus
    </label>
    <input id="menuBrailleCommands" type="checkbox"
             class="checkbox pref" name="menuBrailleCommands"
             aria-labelledby="menuBrailleCommandsLabel">
  </div>

  <div id="bluetoothBraille"></div>

  <h2 class="i18n" msgid="options_virtual_braille_display">
    Virtual Braille Display
  </h2>
  <p class="i18n" msgid="options_virtual_braille_display_details">
    Simulates the output of a refreshable braille display
    in the ChromeVox panel at the top of the screen.
  </p>
  <div class="option">
  <label>
    <span class="i18n description" msgid="options_virtual_braille_display_rows"
          id="virtual_braille_display_rows_description">
      Lines:
    </span>
    <input type="number" min="1" id="virtual_braille_display_rows_input">
  </label>
  </div>
  <div class="option">
  <label>
    <span class="i18n description"
          msgid="options_virtual_braille_display_columns"
          id="virtual_braille_display_columns_description">
      Cells in each line:
    </span>
    <input type="number" min="1" id="virtual_braille_display_columns_input">
  </label>
  </div>
  <div class="option">
    <span id="currentDisplayStyle"></span>
    <button id="changeDisplayStyle"></button>
  </div>

  <h2 class="i18n" msgid="options_developer_options" id="developerDescription">
    Developer Options
  </h2>
  <div class="chromeos option" id="developerLog">
    <label>
      <cr-expand-button class="developer-option-icon-button"
          id="chromeVoxDeveloperOptions" name="chromeVoxDeveloperOptions">
        <span class="i18n" msgid="options_developer_options"
              id="developer-options-label">
          Enable developer options
        </span>
      </cr-expand-button>
    </label>
  </div>
  <div class="option" id="developerSpeechLogging" hidden>
    <label>
      <input id="enableSpeechLogging" type="checkbox"
             class="checkbox pref logging" name="enableSpeechLogging">
      <span class="i18n" msgid="options_developer_speech_logging">
        Enable speech logging
      </span>
    </label>
  </div>
  <div class="option" id="developerEarconLogging" hidden>
    <label>
      <input id="enableEarconLogging" type="checkbox"
             class="checkbox pref logging" name="enableEarconLogging">
      <span class="i18n" msgid="options_developer_earcon_logging">
        Enable earcon logging
      </span>
    </label>
  </div>
  <div class="option" id="developerBrailleLogging" hidden>
    <label>
      <input id="enableBrailleLogging" type="checkbox"
             class="checkbox pref logging" name="enableBrailleLogging">
      <span class="i18n" msgid="options_developer_braille_logging">
        Enable braille logging
      </span>
    </label>
  </div>
  <div class="option" id="developerEventStream" hidden>
    <label>
      <input id="enableEventStreamLogging" type="checkbox"
             class="checkbox pref logging" name="enableEventStreamLogging">
      <span class="i18n" msgid="options_event_stream_logging">
        Enable event stream logging
      </span>
    </label>
    <button id="toggleEventStreamFilters"></button>
  </div>
  <div class="option" id="showDeveloperLog" hidden>
    <label>
      <cr-link-row class="developer-option-icon-button" id="openDeveloperLog"
          using-slotted-label external embedded>
        <span slot="label" class="i18n" msgid="options_show_log"></span>
        <span slot="sub-label" class="i18n sub-description"
            msgid="options_show_log_key"></span>
      </cr-link-row>
    </label>
  </div>

  <div id="eventStreamFilters" hidden>
    <div class="option">
      <button id="enableAllEventStreamFilters" class="i18n"
          msgid="options_enable_all_event_stream_filters"></button>
      <button id="disableAllEventStreamFilters" class="i18n"
          msgid="options_disable_all_event_stream_filters"></button>
    </div>
    <label><div class="option-eventstream">
      <input name="activedescendantchanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>activedescendantchanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="alert" type="checkbox"
             class="checkbox pref eventstream">
      <span>alert</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="ariaAttributeChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>ariaAttributeChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="autocorrectionOccured" type="checkbox"
             class="checkbox pref eventstream">
      <span>autocorrectionOccured</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="blur" type="checkbox"
             class="checkbox pref eventstream">
      <span>blur</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="checkedStateChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>checkedStateChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="childrenChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>childrenChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="clicked" type="checkbox"
             class="checkbox pref eventstream">
      <span>clicked</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="documentSelectionChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>documentSelectionChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="documentTitleChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>documentTitleChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="expandedChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>expandedChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="focus" type="checkbox"
             class="checkbox pref eventstream">
      <span>focus</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="focusContext" type="checkbox"
             class="checkbox pref eventstream">
      <span>focusContext</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="imageFrameUpdated" type="checkbox"
             class="checkbox pref eventstream">
      <span>imageFrameUpdated</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="hide" type="checkbox"
             class="checkbox pref eventstream">
      <span>hide</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="hitTestResult" type="checkbox"
             class="checkbox pref eventstream">
      <span>hitTestResult</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="hover" type="checkbox"
             class="checkbox pref eventstream">
      <span>hover</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="invalidStatusChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>invalidStatusChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="layoutComplete" type="checkbox"
             class="checkbox pref eventstream">
      <span>layoutComplete</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="liveRegionCreated" type="checkbox"
             class="checkbox pref eventstream">
      <span>liveRegionCreated</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="liveRegionChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>liveRegionChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="loadComplete" type="checkbox"
             class="checkbox pref eventstream">
      <span>loadComplete</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="locationChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>locationChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mediaStartedPlaying" type="checkbox"
             class="checkbox pref eventstream">
      <span>mediaStartedPlaying</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mediaStoppedPlaying" type="checkbox"
             class="checkbox pref eventstream">
      <span>mediaStoppedPlaying</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuEnd" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuEnd</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuListItemSelected" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuListItemSelected</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuListValueChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuListValueChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuPopupEnd" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuPopupEnd</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuPopupStart" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuPopupStart</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="menuStart" type="checkbox"
             class="checkbox pref eventstream">
      <span>menuStart</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mouseCanceled" type="checkbox"
             class="checkbox pref eventstream">
      <span>mouseCanceled</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mouseDragged" type="checkbox"
             class="checkbox pref eventstream">
      <span>mouseDragged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mouseMoved" type="checkbox"
             class="checkbox pref eventstream">
      <span>mouseMoved</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mousePressed" type="checkbox"
             class="checkbox pref eventstream">
      <span>mousePressed</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="mouseReleased" type="checkbox"
             class="checkbox pref eventstream">
      <span>mouseReleased</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="rowCollapsed" type="checkbox"
             class="checkbox pref eventstream">
      <span>rowCollapsed</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="rowCountChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>rowCountChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="rowExpanded" type="checkbox"
             class="checkbox pref eventstream">
      <span>rowExpanded</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="scrollPositionChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>scrollPositionChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="scrolledToAnchor" type="checkbox"
             class="checkbox pref eventstream">
      <span>scrolledToAnchor</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="selectedChildrenChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>selectedChildrenChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="selection" type="checkbox"
             class="checkbox pref eventstream">
      <span>selection</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="selectionAdd" type="checkbox"
             class="checkbox pref eventstream">
      <span>selectionAdd</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="selectionRemove" type="checkbox"
             class="checkbox pref eventstream">
      <span>selectionRemove</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="show" type="checkbox"
             class="checkbox pref eventstream">
      <span>show</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="stateChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>stateChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="textChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>textChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="textSelectionChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>textSelectionChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="treeChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>treeChanged</span>
    </div></label>
    <label><div class="option-eventstream">
      <input name="checkedStateChanged" type="checkbox"
             class="checkbox pref eventstream">
      <span>checkedStateChanged</span>
    </div></label>
  </div>
  </div>

  <div id="status" role="live" aria-live="assertive">
  </div>

  </div>

</body>
</html>
